<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label">线上课程选择</label>
            <div class="layui-input-block">
                <div id="node_id1" class="demo-tree-more"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">实操课程选择</label>
            <div class="layui-input-block">
                <div id="node_id2" class="demo-tree-more"></div>
            </div>
        </div>
        <div class="layui-form-item text-center">
            <input type="hidden" name="id" value="{$id}">
            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="submit_froms">确认</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
        </div>
    </form>
    <script src="__STATIC__/plugs/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script>
        layui.use(['form', 'tree'], function () {
            var form = layui.form;
            var that = this;
            form.render()
            var getRule;
            var id = $("input[name='id']").val();
            $.ajax({
                url: "{:url('admin/user.user/settopic')}?id="+id,
                type: 'get',
                dataType: 'json',
                async: false,
                success: function (data) {
                    getRule = data;
                }
            });
            var tree = layui.tree;
            tree.render({
                elem: '#node_id1',
                data: getRule.online,
                showCheckbox: true,
                id: 'nodeDataId1'
            })
            ;
            tree.render({
                elem: '#node_id2',
                data: getRule.offline,
                showCheckbox: true,
                id: 'nodeDataId2',
            });
            //监听提交
            form.on('submit(submit_froms)', function (data) {
                var nodeDataId1 = tree.getChecked('nodeDataId1');
                var nodeDataId2 = tree.getChecked('nodeDataId2');
                console.log(JSON.stringify(nodeDataId1))
                console.log(JSON.stringify(nodeDataId2))
                if(nodeDataId1.length == 0 && nodeDataId2.length ==0){
                    layer.msg('线上课程或者实操课程必选其一');
                    return false;
                }
                $.ajax({
                    url: "{:url('admin/user.user/setTopicSave')}",
                    type: 'post',
                    data: {'id':id,'node1':getChecked_list(nodeDataId1),'node2':getChecked_list(nodeDataId2)},
                    dataType: 'json',
                    async: false,
                    success: function (res) {
                        if(res.code == 1){
                            layer.msg(res.message, {icon: 1, time: 1500}, function () {
                                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                                parent.layer.close(index);
                            });
                        }else {
                            layer.msg(res.message, {icon: 2, time: 2000});
                        }
                    }
                });
            })
        });

        // 获取选中节点的id
        function getChecked_list(data) {
            var nodes='';
            for (var i = 0 ;i< data.length; i++){
                nodes += data[i]['id']+'-';
                for (var j = 0 ;j< data[i]['children'].length; j++){
                    var sx = data[i]['children'].length > j+1 ?'|':''
                    nodes += data[i]['children'][j]['id'] + sx;
                }
                if(data.length > i+1){
                    nodes += ","
                }
            }
            return nodes
        }
    </script>
</div>